/* 侧边栏样式 */
html, body, #whole{
    height: 100vh;
}
#menu{
    border-radius: 10px;
    max-width: 180px;
    min-width: 120px;
    height: 100%;
    float: left;
    background-color:#ececec;
    box-shadow: 3px 3px 2px #616161;
    display: flex;
    flex-direction: column;
    padding: 10px 10px 0px; 
}

#whole{
    display: flex;
    flex-direction: row;
}

#menu_slip{
    display: flex;
    flex-direction: row;
}
#menu_slip_button{
    padding-left: 5px;
    width:40%;
    height:40%;
}
#menu_slip_text{
    padding-left: 5%;
    padding-top: 5%;
    font-size: 25px;
}
/* 当页面宽度小于600时，侧边栏消失
@media screen and (max-width: 600px) {
    div#menu {
      display: none;
    }
}*/
/* 改进：
1.增加一个按钮，使侧边栏显示
2.侧边栏隐藏时，右边的部分需要左移占用其位置 
 */

.category_button {
    border-radius: 10px;
    background-color: #5c5c5c; /* Green */
    border: none;
    color: white;
    padding: 10px 10px;
    text-align: center; /*水平居中*/
    text-decoration: none;
    /* display: inline-block; */
    font-size: 15px;
}
.category_button:hover {
    background-color: #292929;
}
.category_button_add {
    border-radius: 10px;
    background-color: #5c5c5c; /* Green */
    border: none;
    color: white;
    padding: 10px 10px;
    text-align: center; /*水平居中*/
    text-decoration: none;
    /* display: inline-block; */
    font-size: 15px;
}
#copyright {
    font-size: x-small;
}
#right{
    padding-left: 10px;
    width: 100%;
}
/* 书迁顶部样式 */
#header{
    border-radius: 10px;
    background-color:#ececec;
	box-shadow: 3px 3px 2px #616161;
    display: flex;
    flex-direction: row; 
    align-items: center; 
    padding-left: 10px;
    width:90%;
    /* border: solid 1px green; */
}

/* 书迁icon样式 */
#mark{
    width:10%;
    height:10%;
}
#title{
    padding-left: 10px;
}
#header span{
    display: inline-block;
    margin-left: 10px;
}
#menu_category{
    overflow: auto;
}

/* 文件夹内容 */
.category_content {
    border:1px solid #ececec;
    background-color:#ececec;
    border-radius: 5px;
    box-shadow: 2px 2px 5px #616161;
    margin-top:10px;
    width:95%;
    height:85%;
    /* margin-left: 5px; */
    padding:5px;
    z-index: 2;
    visibility: hidden;
}

a{
    text-decoration: none;
    color:white;
}
.category_tags{
    width:100%;
    height:85%;
    overflow: auto;
}

.tag_img{
    width:17px;
    height:17px;
    padding-right: 5px;
}

.tag{
    border-radius: 10px;
    background-color:#727272;
    box-shadow: 3px 3px 2px #363636;
    padding: 10px 10px; 
    display: flex;
    flex-direction: row;
}



#category_button_add_input{
    height: 15px;
    width: 80%;
}

#category_title{
    display: flex;
    flex-direction: row;
}

.category_del{
    padding-top: 20px;
    padding-left: 10px;
}

.tag_del{
    padding-left: 10px;
}
